import React, { Component } from 'react';
import { Card, Spin } from 'antd';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import NoData from '../NoData/NoData';
import { generateTreeChartOption } from '@/utils/echarts-figures.js';

/**
 * 动态相似图表
 */
export default class Similar extends Component {
  static propTypes = {
    isLoading: PropTypes.bool,
    desc: PropTypes.string,
    dynamicChart: PropTypes.object.isRequired,
  };

  static defaultProps = {
    desc: '',
    dynamicChart: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      hasData: true,
      option: generateTreeChartOption('动态相似', props.dynamicChart),
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { dynamicChart } = nextProps;
    if (dynamicChart && Object.keys(dynamicChart).length > 0) {
      return {
        option: generateTreeChartOption('动态相似', dynamicChart),
        hasData: true,
      };
    }
    return {
      hasData: false,
    };
  }

  render() {
    const { desc, isLoading } = this.props;
    const { hasData, option } = this.state;
    return (
      <div>
        <Card>
          <Spin spinning={!!isLoading} style={{ width: '100%' }}>
            {!hasData && <NoData />}
            {hasData && (
              <ReactEcharts option={this.state.option} style={{ width: '100%', height: '680px' }} />
            )}

            <div style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '10px' }}>
              指标解释
            </div>
            <div className="tab-text">{desc}</div>
          </Spin>
        </Card>
      </div>
    );
  }
}
